<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Screen</title>
		<link rel="stylesheet" type="text/css" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/global.css" />
		<link rel="stylesheet" type="text/css" href="css/screen.css"/>
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.$ = window.jQuery = require('./jquery-3.3.1.min');
		</script>
		<script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="plugins/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="plots.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<audio id="voice" src="">
			当前浏览器不支持audio
		</audio>
		<div id="screen">
			<a type="button" class="btn btn-link" style="width: 100%;text-align: center;font-size: 35px;" href="computer_room.html">Turn off</a>
			<button type="button" class="btn btn-link" style="width: 100%;text-align: center;font-size: 35px;" v-for="r in record" v-on:click="play_mp3(r.sound);">{{ r.value }}</button>
		</div>
		<script type="text/javascript">
			var fs = require('fs');
			var voice = document.getElementById('voice');
			
			if (!fs.existsSync('current.json')) {
				layer.alert('Can\'t find current.json', {icon: 2});
			} else {
				var current_json_str = fs.readFileSync('current.json');
				var source_json_name = JSON.parse(current_json_str).target;
				var json_str = fs.readFileSync('archives/' + source_json_name);
				var json = JSON.parse(json_str.toString());
				
				var kv = get_url_kv(location.href);
				var type = search_url_kv(kv, 'type');
				
				if (type === null) {  // TV
					//
				} else if (type === 'computer') {  // computer
					var record = json.record;
					new Vue({
						el: '#screen',
						data: function () {
							var r = [];
							for (var index in record) {
								var i = record[index];
								for (var r_i in i) {
									r.push({
										key: r_i,
										value: r_i + '——' + i[r_i][0],
										sound: i[r_i][1],
									});
								}
							}
							return {
								record: r,
							};
						}
					});
					
					function play_mp3(file_name) {
						if (fs.existsSync('audio/vocabulary/' + file_name)) {
							voice.src = 'audio/vocabulary/' + file_name;
							voice.play();
						}
					}
				}
			}
		</script>
	</body>
</html>
